<template>
  <div>
    <editor v-model="content"></editor>
    <el-dialog v-model="dialogVisible" title="上传图片" width="50%" :visible.sync="dialogVisible">
      <el-image :src="imageUrl" :style="{ transform: 'scale(' + scale + ')' }" style="max-width: 100%" fit="contain"></el-image>
      <el-slider v-model="scale" :min="0.1" :max="2" :step="0.1" show-stops></el-slider>
      <div slot="footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        <el-button type="success" @click="saveImage">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from 'vue2-editor'
export default {
  name: 'UploadImg',
  components: {
    Editor
  },
  data () {
    return {
      content: '',
      dialogVisible: false,
      imageUrl: '',
      scale: 1
    }
  },
  methods: {
    showDialog () {
      this.dialogVisible = true
      this.imageUrl = URL.createObjectURL(event.detail.file)
    },
    saveImage () {
      // 在这里保存图片并关闭弹出框
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
